@mixin btn-style($color, $background, $hover-background, $shadow) {
  color: $color;
  background-color: $background;
  box-shadow: inset -4px -4px $shadow;

  &:hover,
  &:focus {
    background-color: $hover-background;
    box-shadow: inset -6px -6px $shadow;
  }

  &:active {
    box-shadow: inset 4px 4px $shadow;
  }
}

@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
  color: $color;
  background-color: $background;

  &:hover,
  &:focus {
    background-color: $hover-background;
    outline: 0;
    // prettier-ignore
    box-shadow:
      0 -4px $hover-background,
      inset 0 -2px $shadow,
      0 -8px $base-color,
      4px 0 $shadow,
      4px -4px $base-color,
      8px 0 $base-color,
      0 4px $shadow,
      4px 4px $base-color,
      0 8px $base-color,
      -4px 0 $hover-background,
      inset -2px 0 $shadow,
      -4px -4px $base-color,
      -8px 0 $base-color,
      -4px 4px $base-color;
  }

  &:active {
    // prettier-ignore
    box-shadow:
      0 -4px $shadow,
      0 -8px $base-color,
      4px 0 $hover-background,
      4px -4px $base-color,
      8px 0 $base-color,
      0 4px $hover-background,
      4px 4px $base-color,
      0 8px $base-color,
      -4px 0 $shadow,
      -4px -4px $base-color,
      -8px 0 $base-color,
      -4px 4px $base-color;
  }

  // prettier-ignore
  box-shadow:
    0 -4px $background,
    0 -8px $base-color,
    4px 0 $shadow,
    4px -4px $base-color,
    8px 0 $base-color,
    0 4px $shadow,
    4px 4px $base-color,
    0 8px $base-color,
    -4px 0 $background,
    -4px -4px $base-color,
    -8px 0 $base-color,
    -4px 4px $base-color;
}

// Default style
.nes-btn {
  $border-size: 4px;

  position: relative;
  display: inline-block;
  padding: 10px 12px;
  margin: $border-size;
  text-align: center;
  vertical-align: middle;
  cursor: $cursor-click-url, pointer;
  user-select: none;
  border: none;

  @include btn-style(
    $base-color,
    map-get($default-colors, "normal"),
    map-get($default-colors, "hover"),
    map-get($default-colors, "shadow")
  );

  &::before,
  &::after {
    position: absolute;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    content: "";
    border-color: $base-color;
    border-style: solid;
    border-width: $border-size;
  }

  &::before {
    top: $border-size * -1;
    left: 0;
    border-right: $border-size / 2;
    border-left: $border-size / 2;
  }

  &::after {
    top: 0;
    left: $border-size * -1;
    border-top: $border-size / 2;
    border-bottom: $border-size / 2;
  }

  &:focus {
    outline: 0;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus {
    color: $base-color;
    cursor: not-allowed;
    background-color: map-get($disabled-colors, "normal");
    box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
    opacity: 0.6;
  }

  // Other styles
  // prettier-ignore
  $types:
    "primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
    "success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
    "warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
    "error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");

  @each $type in $types {
    &.is-#{nth($type, 1)} {
      @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
    }
  }

  &.is-rounded {
    box-sizing: content-box;
    padding: 6px 8px;
    @include btn-extra-pixelize-style(
      $base-color,
      map-get($default-colors, "normal"),
      map-get($default-colors, "hover"),
      map-get($default-colors, "shadow")
    );

    &::before,
    &::after {
      border-width: 0;
    }
    @each $type in $types {
      &.is-#{nth($type, 1)} {
        @include btn-extra-pixelize-style(
          nth($type, 2),
          nth($type, 3),
          nth($type, 4),
          nth($type, 5)
        );
      }
    }
  }
}
